<template>
  <div>
    <Row class="search-info-style" >
      <Col span="6">
        <span style="">姓&#12288;&#12288;名：</span>
        <Input style="width: 70%;" v-model="searchInfo.name" />
      </Col>
      <Col span="6">
        <span style="">证件号码：</span>
        <Input style="width: 70%;" v-model="searchInfo.card_no" />
      </Col>
      <Col span="6">
        <span style="">月&#12288;&#12288;份：</span>
        <DatePicker style="width: 70%" format="yyyy-MM" v-model="searchInfo.wage_month" @on-change="changeMonth" type="month"></DatePicker>
      </Col>
      <Col style="float:right" pull="1">
        <Button v-if="this.$store.state.user.severUserInfo.company_grade === '3'" class="new-btn-sty" @click="excelTemplate">
          <Icon type="success" /> 下载模板
        </Button>
        <Button v-if="this.$store.state.user.severUserInfo.company_grade === '3'" class="new-btn-sty" @click="importExcel2">
          <Icon type="success" /> 导入工资信息
        </Button>
      </Col>
    </Row>
    <Row class="search-info-style">
      <Col span="6" v-if="this.$store.state.user.severUserInfo.company_grade === '2'">
        <span>所在区县：</span>
        <Select v-model="searchInfo.CPWI023" filterable transfer="" clearable @on-change="getMailList2(4,searchInfo.CPWI023)" style="width:70%">
          <Option :value="item.code" v-for="item in mailList1" v-bind:key="item.code">{{item.name}}</Option>
        </Select>
      </Col>
      <Col span="6" v-if="this.$store.state.user.severUserInfo.company_grade === '2' || this.$store.state.user.severUserInfo.company_grade === '3'">
        <span>所在街道：</span>
        <Select v-model="searchInfo.CPWI024" filterable transfer="" clearable @on-change="getMailList2(5, searchInfo.CPWI024)" style="width:70%">
          <Option :value="item.code" v-for="item in mailList2" v-bind:key="item.code">{{item.name}}</Option>
        </Select>
      </Col>
      <Col span="6">
        <span>所在社区：</span>
        <Select v-model="searchInfo.CPWI025" filterable transfer="" clearable style="width:70%">
          <Option :value="item.code" v-for="item in mailList3" v-bind:key="item.code">{{item.name}}</Option>
        </Select>
      </Col>
      <Col style="float:right" pull="1">
        <Button class="new-btn-sty" @click="init()"><Icon type="md-search" />搜索</Button>
        <Button class="new-btn-sty" @click="add()"><Icon type="md-add" />生成工资</Button>
        <Button class="new-btn-sty" :loading="Excelloading" @click="importExcel()"><Icon type="md-add" />导出</Button>
      </Col>
    </Row>
    <Table ref="personSelection" border :columns="columns" :data="data">
      <template slot-scope="{ row }" slot="CPWI006">
        <span :value="item.TYPECODE" v-for="item in positionList" v-bind:key="item.TYPECODE"  v-if="row.CPWI006 == item.TYPECODE">{{ item.TYPENAME }}</span>
      </template>
      <template slot-scope="{ row }" slot="action">
        <Button v-if="company_grade === '3'" type="primary" size="small" style="margin-right: 5px" @click="show(row)">编辑</Button>
      </template>
    </Table>
    <Page class="page_style" :total="totalnum" :current="currentPageNo"
          :page-size="currentPageSize" @on-change="changePageNo" show-total  show-sizer @on-page-size-change="size"/>
    <Row v-if="loadData == true">
      <Col class="demo-spin-col" span="8" offset="8">
        <Spin fix>
          <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
          <div>数据正在加载</div>
        </Spin>
      </Col>
    </Row>
    <Modal v-model="modalEdit" title="生成工资" okText="关闭" @on-ok="modalEdit = false">
      <Form :model="paramData" >
        <Row class="item1">
          <Col span="7" style="text-align: right" class="">选择日期:</Col>
          <Col span="12" offset="1">
            <DatePicker format="yyyy-MM" v-model="paramData.month" @on-change="changeMonth" type="month"></DatePicker>
          </Col>
        </Row>
      </Form>
      <div style="text-align: center">
        <Button :loading="generateLoading" type="success" @click="OK111">生成全部职工工资</Button>
        <Button :loading="generateLoading" style="margin-left: 10px" type="warning" @click="savePartWage">生成未生成职工工资</Button>
      </div>
      <Row>
        <Col>
          <div><span>注意：</span></div>
          <div><span>1.生成工资时请确保社区工作者的“社工状态”为“正常”，否则该人员工资无法生成。</span></div>
          <div><span>2.工资生成根据社区工作者当前信息生成。</span></div>
        </Col>
      </Row>
    </Modal>
    <Modal v-model="wageEdit" title="出勤补贴" @on-ok="OK222">
      <Form :model="paramData" >
        <Row class="item1">
          <Col span="7" style="text-align: right" class="">出勤补贴:<span style="color: red">(必填)</span></Col>
          <Col span="12" offset="1">
            <InputNumber style="width: 245px" :min="0" :max='500' v-model="formData.chuqin_money"/>
          </Col>
        </Row>
      </Form>
    </Modal>
    <import-excel ref="child"></import-excel>
  </div>
</template>
<script>
import ImportExcel from './components/import-excel'
import { date2str, findPersonnelWageList, getTypeNameList, saveWage, updateWageMoney, savePartWage, getOffice, findPersonnelWageExcelList } from '@/api/eventlist'
export default {
  components: {ImportExcel},
  data() {
    return {
      currentPageNo: 1,
      currentPageSize: 10,
      totalnum: 0,
      loadData: true,
      Excelloading: false,
      generateLoading: false,
      showEdit: false,
      modalEdit: false,
      wageEdit: false,
      paramData: {},
      formData: {},
      searchInfo: {},
      month: '',
      company_grade: '',
      mailList1: [],
      mailList2: [],
      mailList3: [],
      positionList: [],
      data: [],
      columns: [
        { title: '序号', type: 'index', width: 100, align: 'center', fixed: 'left' },
        { title: '区县', key: 'company_name', minWidth: 100, align: 'center', fixed: 'left' },
        { title: '姓名', key: 'CPBI003', minWidth: 100, align: 'center', fixed: 'left' },
        { title: '月份', key: 'wage_month', minWidth: 100, align: 'center', fixed: 'left' },
        { title: '职位', slot: 'CPWI006', minWidth: 100, align: 'center' },
        { title: '工龄（年）', key: 'gongling', minWidth: 100, align: 'center' },
        { title: '岗位基本工资', key: 'basic_money', minWidth: 100, align: 'center' },
        { title: '等级工资', key: 'grade_money', minWidth: 100, align: 'center' },
        { title: '绩效工资', key: 'achievements_money', minWidth: 100, align: 'center' },
        { title: '补贴工资', key: 'subsidy_money', minWidth: 100, align: 'center' },
        { title: '出勤工资', key: 'chuqin_money', minWidth: 100, align: 'center' },
        { title: '基本养老保险扣缴比例', key: 'yanglao', minWidth: 100, align: 'center' },
        { title: '基本养老保险扣缴金额', key: 'yanglao_money', minWidth: 100, align: 'center' },
        { title: '基本医疗保险扣缴比例', key: 'yiliao', minWidth: 100, align: 'center' },
        { title: '基本医疗保险扣缴金额', key: 'yiliao_money', minWidth: 100, align: 'center' },
        { title: '失业保险扣缴比例', key: 'shiye', minWidth: 100, align: 'center' },
        { title: '失业保险扣缴金额', key: 'shiye_money', minWidth: 100, align: 'center' },
        { title: '生育保险扣缴比例', key: 'shengyu', minWidth: 100, align: 'center' },
        { title: '生育保险扣缴金额', key: 'shengyu_money', minWidth: 100, align: 'center' },
        { title: '工伤保险扣缴比例', key: 'gongshang', minWidth: 100, align: 'center' },
        { title: '工伤保险扣缴金额', key: 'gongshang_money', minWidth: 100, align: 'center' },
        { title: '住房公积金扣缴比例', key: 'gongjijin', minWidth: 100, align: 'center' },
        { title: '住房公积金扣缴金额', key: 'gongjijin_money', minWidth: 100, align: 'center' },
        { title: '应发工资', key: 'yingfa_money', minWidth: 100, align: 'center' },
        { title: '代扣', key: 'daikou_money', minWidth: 100, align: 'center' },
        { title: '实发工资', key: 'shifa_money', minWidth: 100, align: 'center' },
        { title: '操作', slot: 'action', minWidth: 100, align: 'center', fixed: 'right' }
      ],
      columns1: [
        { title: '区县', key: 'company_name', minWidth: 100, align: 'center', fixed: 'left' },
        { title: '姓名', key: 'CPBI003', minWidth: 100, align: 'center', fixed: 'left' },
        { title: '月份', key: 'wage_month', minWidth: 100, align: 'center', fixed: 'left' },
        { title: '职位', key: 'post', minWidth: 100, align: 'center' },
        { title: '工龄（年）', key: 'gongling', minWidth: 100, align: 'center' },
        { title: '岗位基本工资', key: 'basic_money', minWidth: 100, align: 'center' },
        { title: '等级工资', key: 'grade_money', minWidth: 100, align: 'center' },
        { title: '绩效工资', key: 'achievements_money', minWidth: 100, align: 'center' },
        { title: '补贴工资', key: 'subsidy_money', minWidth: 100, align: 'center' },
        { title: '出勤工资', key: 'chuqin_money', minWidth: 100, align: 'center' },
        { title: '基本养老保险扣缴比例', key: 'yanglao', minWidth: 100, align: 'center' },
        { title: '基本养老保险扣缴金额', key: 'yanglao_money', minWidth: 100, align: 'center' },
        { title: '基本医疗保险扣缴比例', key: 'yiliao', minWidth: 100, align: 'center' },
        { title: '基本医疗保险扣缴金额', key: 'yiliao_money', minWidth: 100, align: 'center' },
        { title: '失业保险扣缴比例', key: 'shiye', minWidth: 100, align: 'center' },
        { title: '失业保险扣缴金额', key: 'shiye_money', minWidth: 100, align: 'center' },
        { title: '生育保险扣缴比例', key: 'shengyu', minWidth: 100, align: 'center' },
        { title: '生育保险扣缴金额', key: 'shengyu_money', minWidth: 100, align: 'center' },
        { title: '工伤保险扣缴比例', key: 'gongshang', minWidth: 100, align: 'center' },
        { title: '工伤保险扣缴金额', key: 'gongshang_money', minWidth: 100, align: 'center' },
        { title: '住房公积金扣缴比例', key: 'gongjijin', minWidth: 100, align: 'center' },
        { title: '住房公积金扣缴金额', key: 'gongjijin_money', minWidth: 100, align: 'center' },
        { title: '应发工资', key: 'yingfa_money', minWidth: 100, align: 'center' },
        { title: '代扣', key: 'daikou_money', minWidth: 100, align: 'center' },
        { title: '实发工资', key: 'shifa_money', minWidth: 100, align: 'center' }
      ]
    }
  },
  methods: {
    init() {
      if (this.searchInfo.wage_month) {
        let wage_month = this.searchInfo.wage_month
        wage_month.setMonth(wage_month.getMonth())
        let year = wage_month.getFullYear()
        let month = wage_month.getMonth() + 1
        month = (month < 10 ? '0' + month : month)
        this.searchInfo.wage_month = (year.toString() + '-' + month.toString())
      }
      console.log(this.searchInfo.wage_month, '[[[[[[[[[[[[[[[')
      let param = {
        pageSize: this.currentPageSize,
        pageNo: this.currentPageNo,
        CPWI023: this.searchInfo.CPWI023,
        CPWI024: this.searchInfo.CPWI024,
        CPWI025: this.searchInfo.CPWI025,
        card_no: this.searchInfo.card_no,
        name: this.searchInfo.name,
        wage_month: this.searchInfo.wage_month
      }
      findPersonnelWageList(param).then(res => {
        if (res.data.errcode === 0) {
          this.data = res.data.data.results
          this.loadData = false
          this.totalnum = res.data.data.totalRecord
        } else {
          this.$Notice.error({
            title: '获取列表失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    add() {
      this.month = ''
      this.paramData.month = ''
      this.modalEdit = true
    },
    show(item) {
      this.wageEdit = true
      this.formData = this.$common.xeUtils.clone(item,true)
    },
    changeMonth(month) {
      this.month = month
    },
    OK111 () {
      this.generateLoading = true
      let now = this.paramData.month //当前日期
      let nowMonth = now.getMonth() //当前月
      let nowYear = now.getFullYear() //当前年
      //本月的结束时间
      let monthEndDate = new Date(nowYear, nowMonth+1, 0)
      let param = {
        wage_month: this.month,
        monthEndDate: monthEndDate
      }
      saveWage(param).then(res => {
        if (res.data.errcode === 0) {
          this.loadData = true
          this.month = ''
          this.modalEdit = false
          this.init()
          let length = res.data.data.length
          this.generateLoading = false
          this.$Notice.success({
            title: '工资生成成功',
            desc: '共生成' + length + '人工资'
          })
        } else {
          this.$Notice.error({
            title: '生成失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    savePartWage () {
      this.generateLoading = true
      let now = this.paramData.month //当前日期
      let nowMonth = now.getMonth() //当前月
      let nowYear = now.getFullYear() //当前年
      //本月的结束时间
      let monthEndDate = new Date(nowYear, nowMonth+1, 0)
      let param = {
        wage_month: this.month,
        monthEndDate: monthEndDate
      }
      saveWage(param).then(res => {
        if (res.data.errcode === 0) {
          this.loadData = true
          this.modalEdit = false
          this.month = ''
          this.init()
          let length = res.data.data.length
          this.generateLoading = false
          this.$Notice.success({
            title: '生成成功',
            desc: '共生成' + length + '人工资'
          })
        } else {
          this.$Notice.error({
            title: '生成失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    importExcel(){
      this.Excelloading = true
      if (this.searchInfo.wage_month) {
        let wage_month = this.searchInfo.wage_month
        wage_month.setMonth(wage_month.getMonth())
        let year = wage_month.getFullYear()
        let month = wage_month.getMonth() + 1
        month = (month < 10 ? '0' + month : month)
        this.searchInfo.wage_month = (year.toString() + '-' + month.toString())
      }
      let param = {
        pageSize: this.currentPageSize,
        pageNo: this.currentPageNo,
        CPWI023: this.searchInfo.CPWI023,
        CPWI024: this.searchInfo.CPWI024,
        CPWI025: this.searchInfo.CPWI025,
        card_no: this.searchInfo.card_no,
        name: this.searchInfo.name,
        wage_month: this.searchInfo.wage_month
      }
      findPersonnelWageExcelList(param).then(ret=>{
        if(ret.data.errcode===0){
          this.$refs.personSelection.exportCsv({
            filename: '人员工资信息',
            columns:this.columns1,
            data: ret.data.data.map(k => {
              k.wage_month = '\t' + k.wage_month
              return k
            })
          })
          this.Excelloading = false
        }else {
          this.$Notice.error({
            title: '导出失败！',
            desc: ret.data.errmsg
          })
          this.Excelloading = false
        }
      })
    },
    importExcel2 () {
      this.$refs.child.init()
    },
    excelTemplate () {
      console.log('模板连接')
      window.open('http://imgdl.tripln.top/webhdfs/v1/worker/wage/社区工作者工资导入模板_3219971250.xlsx?op=OPEN&namenoderpcaddress=hadoop01:9000&offset=0')
    },
    OK222() {
      console.log(this.formData)
      let params = {
        card_no: this.formData.card_no,
        id: this.formData.id,
        chuqin_money: this.formData.chuqin_money,
        wage_month: this.formData.wage_month
      }
      updateWageMoney(params).then(res => {
        if (res.data.errcode === 0) {
          this.loadData = true
          this.init()
        } else {
          this.$Notice.error({
            title: '修改失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    getTypeName (id) {
      getTypeNameList({ typegroupcode: id }).then(res => {
        if (res.data.errcode === 0) {
          this.positionList = res.data.data
        } else {
          this.$Notice.error({
            title: '获取字典列表失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    size (pageSize) {
      this.currentPageSize = pageSize
      this.changePageNo()
    },
    changePageNo (pageNo) {
      this.currentPageNo = pageNo
      this.init()
    },
    getMailList (grade, code) {
      // this.searchInfo['grade' + (index + 1)] = 0
      getOffice({ grade: grade, code: code }).then(res => {
        if (res.data.errcode === 0) {
          this.mailList1 = res.data.data
          let xiehui = {code: "1", name: "社区工作者协会", master: "社区工作者协会"}
          this.mailList1.push(xiehui)
          // this.mailList[index].unshift({ id: 0, title: '全部' })
          // this.$forceUpdate()
        } else {
          this.$Notice.error({ title: '获取信息失败', desc: '查询区域列表信息失败' })
        }
      })
    },
    getMailList2 (grade, code) {
      // this.searchInfo['grade' + (index + 1)] = 0
      getOffice({ code: code }).then(res => {
        if (res.data.errcode === 0) {
          if (grade === 4) {
            this.mailList2 = res.data.data
            let xiehui = {code: "1", name: "社区工作者协会", master: "社区工作者协会"}
            this.mailList2.push(xiehui)
          } else if (grade === 5) {
            this.mailList3 = res.data.data
          }
          // this.mailList[index].unshift({ id: 0, title: '全部' })
          // this.$forceUpdate()
        } else {
          this.$Notice.error({ title: '获取信息失败', desc: '查询区域列表信息失败' })
        }
      })
    },

  },
  mounted() {
    this.init()
    this.getTypeName('position')
    if (this.companyGrade < 3) {
      this.getMailList(2, null)
    } else if (this.companyGrade < 4) {
      this.getMailList2(4, this.companyCode)
    } else if (this.companyGrade < 5) {
      this.getMailList2(5, this.companyCode)
    }
    this.company_grade = this.$store.state.user.severUserInfo.company_grade
  },
  computed: {
    companyGrade () {
      return this.$store.state.user.severUserInfo.company_grade
    },
    companyCode () {
      return this.$store.state.user.severUserInfo.company_code
    }
  }
}
</script>
<style>
.search-info-style {
  margin: 10px;
}
.new-btn-sty {
  margin-right: 5px;
  color: #fff;
  background-color: #235CA7;
  border-color: #235CA7;
  font-weight: 500;
}
.item1{
  height: 42px;
  line-height: 40px;
}
.page_style {
  margin-top: 10px;
  text-align: right;
}
</style>
